<template>
	<div class="card">
		<el-card v-for="item in 10" :key="item" shadow="hover">
			<div class="content">
				<div class="hospital-info">
					<div class="name">航天中心医院</div>
					<div class="level-time">
						<div class="level">
							<span>
								<svg
									t="1749193594334"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="4663"
									width="16"
									height="16"
								>
									<path
										d="M840.88 330H631.67c-11.17 0-19.3-10.6-16.41-21.38l23.16-86.43c14.45-53.93-17.55-109.36-71.48-123.81A98.616 98.616 0 0 0 541.36 95c-43.88 0-84.3 29.38-96.17 73.66l-19.8 73.88C411.57 294.12 364.82 330 311.41 330H150c-17.67 0-32 14.33-32 32v448c0 17.67 14.33 32 32 32h618.88c30.8 0 57.23-21.94 62.9-52.21l72-384c7.39-39.38-22.82-75.79-62.9-75.79zM182 394h93.63L248.2 778H182V394z m586.88 384H312.37l27.6-386.39c69.97-11.15 128.47-62.44 147.25-132.51l19.8-73.88c4.07-15.2 18.52-26.22 34.35-26.22 3.01 0 6.04 0.4 9.01 1.2 19.76 5.29 31.52 25.68 26.23 45.43l-23.16 86.43c-6.57 24.52-1.47 50.13 13.98 70.26 15.45 20.14 38.87 31.69 64.25 31.69h209.21L768.88 778z"
										fill="#828282"
										p-id="4664"
									></path>
								</svg>
							</span>
							<span class="level-text">三级乙等</span>
						</div>
						<div class="time">
							<span>
								<svg
									t="1749193716411"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="6007"
									id="mx_n_1749193716412"
									width="16"
									height="16"
								>
									<path
										d="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z"
										fill="#828282"
										p-id="6008"
									></path>
									<path
										d="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z"
										fill="#828282"
										p-id="6009"
									></path>
								</svg>
							</span>
							<span class="time-text">每天08:00放号</span>
						</div>
					</div>
				</div>
				<div class="hospital-logo">
					<img src="@/assets/images/logo.png" alt="logo" />
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'HospitalCard',
	};
</script>

<script setup lang="ts"></script>

<style scoped lang="scss">
	.card {
		display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    :deep(.el-card) {
      width: 48%;
      margin-bottom: 10px;
    }

		.content {
			display: flex;
			justify-content: space-between;

			.hospital-info {
				width: 80%;

				.name {
					color: #393c40;
					margin-bottom: 20px;
				}

				.level-time {
					color: #828282;
					display: flex;

					.level {
						margin-right: 90px;
						display: flex;

						.level-text {
							margin-left: 4px;
						}
					}

					.time {
						display: flex;

						.time-text {
							margin-left: 4px;
						}
					}
				}
			}

			.hospital-logo {
				width: 20%;
				display: flex;
				justify-content: center;

				img {
					width: 60px;
				}
			}
		}
	}
</style>
